<template>
  <div class="resource-home">
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">心理风险响应</div>
      <div></div>
    </div>

    <div class="container">
      <!-- 图片资源分类 -->
      <section class="category">
        <h2 class="category-title">
          <i class="icon-image"></i>
          图文资源
        </h2>

        <!-- 通识类 -->
        <div class="directory-section">
          <div class="directory-header" @click="toggleDirectory('general')">
            <h3 class="directory-category-title">
              通识类
              <span
                class="directory-arrow"
                :class="{ expanded: expandedDirectories.general }"
              >
                <i class="fas fa-chevron-down"></i>
              </span>
            </h3>
          </div>
          <div v-show="expandedDirectories.general" class="resource-list">
            <div
              v-for="(image, index) in imageCategories.general"
              :key="index"
              class="resource-item"
              @click="goToImageDetail(image.url, image.title)"
            >
              <div class="resource-info">
                <h3 class="resource-title">{{ image.title }}</h3>
                <span class="resource-type image-type">图片</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 危险行为类 -->
        <div class="directory-section">
          <div class="directory-header" @click="toggleDirectory('danger')">
            <h3 class="directory-category-title">
              危险行为类
              <span
                class="directory-arrow"
                :class="{ expanded: expandedDirectories.danger }"
              >
                <i class="fas fa-chevron-down"></i>
              </span>
            </h3>
          </div>
          <div v-show="expandedDirectories.danger" class="resource-list">
            <div
              v-for="(image, index) in imageCategories.danger"
              :key="index"
              class="resource-item"
              @click="goToImageDetail(image.url, image.title)"
            >
              <div class="resource-info">
                <h3 class="resource-title">{{ image.title }}</h3>
                <span class="resource-type image-type">图片</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 职场冲突类 -->
        <div class="directory-section">
          <div class="directory-header" @click="toggleDirectory('workplace')">
            <h3 class="directory-category-title">
              职场冲突类
              <span
                class="directory-arrow"
                :class="{ expanded: expandedDirectories.workplace }"
              >
                <i class="fas fa-chevron-down"></i>
              </span>
            </h3>
          </div>
          <div v-show="expandedDirectories.workplace" class="resource-list">
            <div
              v-for="(image, index) in imageCategories.workplace"
              :key="index"
              class="resource-item"
              @click="goToImageDetail(image.url, image.title)"
            >
              <div class="resource-info">
                <h3 class="resource-title">{{ image.title }}</h3>
                <span class="resource-type image-type">图片</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 自杀尝试类 -->
        <div class="directory-section">
          <div class="directory-header" @click="toggleDirectory('suicide')">
            <h3 class="directory-category-title">
              自杀尝试类
              <span
                class="directory-arrow"
                :class="{ expanded: expandedDirectories.suicide }"
              >
                <i class="fas fa-chevron-down"></i>
              </span>
            </h3>
          </div>
          <div v-show="expandedDirectories.suicide" class="resource-list">
            <div
              v-for="(image, index) in imageCategories.suicide"
              :key="index"
              class="resource-item"
              @click="goToImageDetail(image.url, image.title)"
            >
              <div class="resource-info">
                <h3 class="resource-title">{{ image.title }}</h3>
                <span class="resource-type image-type">图片</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 组织变革类 -->
        <div class="directory-section">
          <div
            class="directory-header"
            @click="toggleDirectory('organization')"
          >
            <h3 class="directory-category-title">
              组织变革类
              <span
                class="directory-arrow"
                :class="{ expanded: expandedDirectories.organization }"
              >
                <i class="fas fa-chevron-down"></i>
              </span>
            </h3>
          </div>
          <div v-show="expandedDirectories.organization" class="resource-list">
            <div
              v-for="(image, index) in imageCategories.organization"
              :key="index"
              class="resource-item"
              @click="goToImageDetail(image.url, image.title)"
            >
              <div class="resource-info">
                <h3 class="resource-title">{{ image.title }}</h3>
                <span class="resource-type image-type">图片</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 图片详情页 -->
    <div v-if="currentImage" class="detail-page">
      <div class="detail-content">
        <img :src="currentImage.url" :alt="currentImage.title" />
        <h3 class="detail-title">{{ currentImage.title }}</h3>
        <button class="close-btn" @click="currentImage = null">×</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ResourceHome",
  data() {
    return {
      currentImage: null,
      expandedDirectories: {
        general: false,
        danger: false,
        workplace: false,
        suicide: false,
        organization: false,
      },
      imageCategories: {
        general: [
          {
            title: "危机事件中员工心理安抚",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E5%8D%B1%E6%9C%BA%E4%BA%8B%E4%BB%B6%E4%B8%AD%E5%91%98%E5%B7%A5%E5%BF%83%E7%90%86%E5%AE%89%E6%8A%9A%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
        ],
        danger: [
          {
            title: "指向他人的危险行为危机干预",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E6%8C%87%E5%90%91%E4%BB%96%E4%BA%BA%E7%9A%84%E5%8D%B1%E9%99%A9%E8%A1%8C%E4%B8%BA%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
          {
            title: "自伤行为危机干预",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E8%87%AA%E4%BC%A4%E8%A1%8C%E4%B8%BA%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
        ],
        workplace: [
          {
            title: "员工群体对组织的冲突",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E5%91%98%E5%B7%A5%E7%BE%A4%E4%BD%93%E5%AF%B9%E7%BB%84%E7%BB%87%E7%9A%84%E5%86%B2%E7%AA%81%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
          {
            title: "职场冲突类—员工个体对组织的冲突",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E8%81%8C%E5%9C%BA%E5%86%B2%E7%AA%81%E7%B1%BB%E2%80%94%E5%91%98%E5%B7%A5%E4%B8%AA%E4%BD%93%E5%AF%B9%E7%BB%84%E7%BB%87%E7%9A%84%E5%86%B2%E7%AA%81%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87%20%281%29.png",
          },
        ],
        suicide: [
          {
            title: "自杀成功危机干预",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E8%87%AA%E6%9D%80%E6%88%90%E5%8A%9F%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
          {
            title: "自杀进行时危机干预",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E8%87%AA%E6%9D%80%E8%BF%9B%E8%A1%8C%E6%97%B6%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
          {
            title: "自杀未遂危机干预",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E8%87%AA%E6%9D%80%E6%9C%AA%E9%81%82%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
        ],
        organization: [
          {
            title: "组织变革类—裁员",
            url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E5%BF%83%E7%90%86%E9%A3%8E%E9%99%A9%E5%93%8D%E5%BA%94/%E7%BB%84%E7%BB%87%E5%8F%98%E9%9D%A9%E7%B1%BB%E2%80%94%E8%A3%81%E5%91%98%E7%9F%A5%E8%AF%86%E5%8D%A1%E7%89%87.png",
          },
        ],
      },
    };
  },
  methods: {
    // 跳转到图片详情页，携带图片地址参数
    goToImageDetail(url, title) {
      // 这里假设您的图片详情页路由为 '/image-detail'
      // 您可以根据实际路由配置进行调整
      this.$router.push({
        path: "/manager/zhishiku/imgmsg",
        query: {
          imgurl: url,
        },
      });
    },

    viewImage(url, title) {
      this.currentImage = { url, title };
    },

    // 切换目录展开状态
    toggleDirectory(category) {
      this.expandedDirectories[category] = !this.expandedDirectories[category];
    },
  },
};
</script>

<style scoped>
.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.resource-home {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.category {
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.category-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
  display: flex;
  align-items: center;
}

.icon-image,
.icon-video {
  margin-right: 10px;
  font-size: 1.3rem;
}

.icon-image::before {
  content: "🖼️";
}

.icon-video::before {
  content: "🎬";
}

/* 目录样式 */
.directory-section {
  margin-bottom: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
}

.directory-header {
  cursor: pointer;
  padding: 15px 20px;
  background-color: #f8f9fa;
  transition: background-color 0.3s;
  border-bottom: 1px solid #eaeaea;
}

.directory-header:hover {
  background-color: #e9ecef;
}

.directory-category-title {
  font-size: 1.2rem;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.directory-arrow {
  transition: transform 0.3s ease;
  color: #666;
}

.directory-arrow.expanded {
  transform: rotate(180deg);
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: white;
}

.resource-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.resource-preview {
  height: 160px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  position: relative;
}

.resource-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview {
  position: relative;
}

.video-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.video-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.play-icon::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #3498db;
  margin-left: 4px;
}

.resource-info {
  padding: 15px;
}

.resource-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.image-type {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.video-type {
  background-color: #e3f2fd;
  color: #1565c0;
}

.detail-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.detail-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 5px;
}

.detail-content video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 5px;
}

.detail-title {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #2c3e50;
  text-align: center;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: #2c3e50;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .resource-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .category {
    padding: 15px;
  }

  .directory-category-title {
    font-size: 1.1rem;
  }
}
</style>
